import React, { Component } from 'react'
import './Mine.less'
import Header from '../../components/Header';
import MineBanner from './MineBanner/MineBanner';
import { reqBanner } from '../../http/api';
import p from '../../assets/img/4.jpeg'
// 改为容器型组件
import { connect } from 'react-redux'
import { getInfo, actions as loginAction } from '../../store/modules/login';
import { bindActionCreators } from 'redux';
import { actions, getBanner } from '../../store/modules/Mine';
class Mine extends Component {
    componentDidMount() {
        // 一进页面就发请求
        let { mine: { reqBannerAction } } = this.props;
        //调用
        reqBannerAction()
    }
    render() {
        let { info: { nickname }, login: { changeInfo }, history: { replace }, banner } = this.props
        console.log(banner);
        return (
            <div>
                <Header title="我的" back></Header>
                <div>
                    <div className="main">
                        <div className="inner">
                            <div className="ava">
                                <img src={p} alt="" />
                                <div className="nickname">{nickname}</div>
                                <div className="outLogin" onClick={() => {
                                    changeInfo({});
                                    replace("/login");
                                }}>退出登录</div>
                            </div>
                            <div className="ava_nav">
                                <ul>
                                    <li>我的收藏</li>
                                    <li>浏览记录</li>
                                    <li>我的红包</li>
                                    <li style={{ fontSize: 'large' }} onClick={() => this.props.history.push('/coupon')}>优惠券</li>
                                </ul>
                            </div>
                            <div className="my_order">
                                <p className="order">我的订单</p>
                                <ul>
                                    <li>待付款</li>
                                    <li>待收货</li>
                                    <li>待评价</li>
                                    <li>售后/退款</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    {/* 轮播图 */}
                    {
                        banner.length > 0 ? <MineBanner list={banner}></MineBanner> : null
                    }

                </div>
            </div>
        )
    }
}
const mapStateToProps = (state) => {
    return {
        info: getInfo(state),
        banner: getBanner(state)
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        //    退出登录，需要修改info
        login: bindActionCreators(loginAction, dispatch),
        mine: bindActionCreators(actions, dispatch)
    }

}
export default connect(mapStateToProps, mapDispatchToProps)(Mine)
